<template>
  <div class="room" @click="$emit('click', $event)">
    <div class="title flex-row">
      {{roomData.title}}
      <p class="posi-left"></p>
      (NO.{{roomData.gameRoundNo}})
    </div>
    <div class="bottom_box">
      <div class="imgbox">
        <img :src="roomData.coverUrl" alt />
      </div>
      <table class="game" border="1" cellspacing="0" cellpadding="10">
        <tr>
          <td
            colspan="9"
            class="custom-td-zj"
          >{{$t('cjsj')}}（{{extractedDateTime.date }},{{extractedDateTime.time}}）</td>
        </tr>
        <tr v-for="(row, rowIndex) in chunkedItems" :key="rowIndex">
          <td class="custom-td" v-for="(item, colIndex) in row" :key="colIndex">
            <div v-if="roomData.gameType === '1'">
              <img
                v-if="item !== null && item % 2 === 1"
                src="../assets/images/index/item_dan.png"
                class="ballimg"
              />
              <img
                v-else-if="item !== null && item % 2 === 0"
                src="../assets/images/index/item_shuang.png"
                class="ballimg"
              />
              <div v-else></div>
            </div>
            <div v-if="roomData.gameType === '2'">
              <img
                v-if="item !== null && item % 2 === 1"
                src="../assets/images/index/hu.png"
                class="ballimg"
              />
              <img
                v-else-if="item !== null && item % 2 === 0"
                src="../assets/images/index/long.png"
                class="ballimg"
              />
              <div v-else></div>
            </div>
            <div v-if="roomData.gameType === '3'">
              <img
                v-if="item !== null && item % 2 === 1"
                src="../assets/images/index/hu.png"
                class="ballimg"
              />
              <img
                v-else-if="item !== null && item % 2 === 0"
                src="../assets/images/index/long.png"
                class="ballimg"
              />
              <div v-else></div>
            </div>
            <div v-if="roomData.gameType === '4'">
              <img
                v-if="item !== null && item % 2 === 1"
                src="../assets/images/index/item_dan.png"
                class="ballimg"
              />
              <img
                v-else-if="item !== null && item % 2 === 0"
                src="../assets/images/index/item_shuang.png"
                class="ballimg"
              />
              <div v-else></div>
            </div>
          </td>
        </tr>
        <tr v-if="roomData.gameType === '1'">
          <td
            class="custom-td-zj"
            colspan="9"
          >{{$t('gong')}}{{roomLength}}{{$t('ju')}}{{$t('dan')}}{{roomData.daCount}}({{roomData.daPercent}}%) {{$t('shuang')}}{{roomData.xiaoCount}}({{roomData.xiaoPercent}}%)</td>
        </tr>
        <tr v-if="roomData.gameType === '2' || roomData.gameType === '3'">
          <td
            class="custom-td-zj"
            colspan="9"
          >{{$t('gong')}}{{roomLength}}{{$t('ju')}}{{$t('long')}}{{roomData.daCount}}({{roomData.daPercent}}%) {{$t('hu')}}{{roomData.xiaoCount}}({{roomData.xiaoPercent}}%)</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
import { roundhistorylist } from "@/api/game";
export default {
  name: "RoomGame",
  props: ["roomData"],
  data() {
    return {
      imgDan: "",
      items: [
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9
      ],
      extractedDateTime: {},
      tableData: [],
      listData: [],
      roomLength: 0
    };
  },
  created() {
    var roomData = this.$props.roomData;
    console.log("roomData", roomData);
    var extractedDateTime = this.extractDateTime(roomData.createTime);
    this.extractedDateTime = extractedDateTime;
    var reqData = {
      id: roomData.id,
      gameRoomUuid: roomData.uuid,
      pageParam: {
        pageNum: 1,
        pageSize: 54
      }
    };
    roundhistorylist(reqData).then(res => {
      var recoder = res.data.data.pageParam.totalRecord % 54;
      this.roomLength = recoder;
      var reqData2 = {
        id: roomData.id,
        gameRoomUuid: roomData.uuid,
        pageParam: {
          pageNum: 1,
          pageSize: recoder
        }
      };
      roundhistorylist(reqData2).then(res2 => {
        var listData = res2?.data?.data?.list;

        if (listData) {
          this.tableData = this.isGame(listData);
          // if (this.roomData.gameType === "1") {
          //   console.log("1", this.tableData);
          // }
          // if (this.roomData.gameType === "2") {
          //   console.log("2", this.tableData);
          // }
          // if (this.roomData.gameType === "3") {
          //   console.log("3", this.tableData);
          // }
          // if (this.roomData.gameType === "4") {
          //   console.log("4", this.tableData);
          // }
        }
      });
    });
  },

  computed: {
    chunkedItems() {
      const chunkSize = 9;
      const items = this.tableData;
      const result = [];
      for (let i = 0; i < items.length; i += chunkSize) {
        result.push(items.slice(i, i + chunkSize));
      }
      return result;
    }
  },
  methods: {
    isGame(array) {
      let firstElements = array.map(item => item.r[0]);
      while (firstElements.length < 54) {
        // 添加空值，循环进行
        firstElements.push(null);
      }
      return firstElements.slice(0, 54);
    },

    extractDateTime(time) {
      // 创建Date对象
      const dateTime = new Date(time);
      // 获取日期部分
      const date = dateTime.toISOString().split("T")[0];
      // 获取时间部分
      const hours = dateTime
        .getHours()
        .toString()
        .padStart(2, "0");
      const minutes = dateTime
        .getMinutes()
        .toString()
        .padStart(2, "0");
      const seconds = dateTime
        .getSeconds()
        .toString()
        .padStart(2, "0");
      const timeString = `${hours}:${minutes}:${seconds}`;
      return {
        date: date,
        time: timeString
      };
    },
    click() {
      this.$refs.loginbtn.click;
    }
  }
};
</script>
<style lang="less" scoped>
.posi-left {
  margin-left: 15px;
}
.title {
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
}
.bottom_box {
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .imgbox {
    width: 154px;
    height: 140px;
    background: #d9d9d9;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    img {
      width: 100%;
      height: 100%;
    }
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
}
.game {
  width: 179px !important;
  height: 138px;
  font-size: 11px;
  font-weight: 400;
  overflow: hidden;
}
.custom-td {
  width: 18px !important;
  height: 16px !important;
  overflow: hidden;
  text-align: center; /* 让单元格内的内容水平居中对齐 */
}
.custom-td-zj {
  height: 18px !important;
  font-size: 11px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
}
.ballimg {
  width: 14px;
  height: 14px;
  display: block;
  margin: 0 auto; /* 让图片水平居中对齐 */
}
</style>
